ui(editor): Add canvas graph model, Add step panel, issues popover, run bar by SCcagg5 · Pull Request #12 · SCcagg5/dagu

SCcagg5 · 2026-10-28T13:10:47Z

Part of a stack of 31 pull requests that depend on each other. They must be reviewed and merged in order: each PR builds on the previous one and its diff only contains its own changes.

Previous: PR 11

Next: PR 13

All PRs of the stack

#	PR
1	specs: Add spec 083 and the samples store
2	ir: Add run state fields for ephemeral runs and reused outputs
3	runtime: Bound continuous steps and carry outputs of selected steps
4	api: Add step samples, events, availability and selected-step runs
5	test(ui): add YAML fixtures for the document model tests
6	ui(lib): add shared UI kit, status helpers and right-panel shell
7	ui(canvas): add canvas engine core, toolbars and editor helpers
8	ui(i18n): add workspace message catalogs, first batch
9	ui(canvas): add canvas Flow view, step run panel and workflow panel
10	ui(editor): add YAML document model, canvas model and run source logic
11	ui(editor): Add edit session, YAML format and quick fixes, run actions, tab strip
12	ui(editor): Add canvas graph model, Add step panel, issues popover, run bar
13	ui(canvas): Add layered layout, dependency edges, status styles, reference picker
14	ui(canvas): Add export, flow builder, upstream data panel, output capture
15	ui(canvas): Add node cards, launchers, inspector sections, client issues
16	ui(editor): Add visual editor, step inspector and YAML file panel
17	ui(lists): Open runs on the workflow page; add tab and schedule helpers
18	ui(workspace): Add workspace URL state, legacy redirects and run list links
19	ui(workspace): Add workspace data layer, run facts and Workflow panel
20	ui(workspace): Add run start controls, visible runs and reuse source
21	ui(workspace): Add data provider, bar identity, continuous panel and step list
22	ui(logs): Add run actions cluster, cached logs and log popout page
23	ui(workspace): Add Activity dock, step run view and workflow page
24	test(workspace): Add integration tests for the workspace shell and step view
25	ui(pages): Retire classic run pages and open runs on the workflow page
26	test(editor): Add integration tests for the editor, inspector and run overlay
27	test(ui): Add repository-wide guard tests and ESLint boundary rules
28	e2e: Add workspace helpers and fixtures, update existing specs
29	e2e: Add workspace specs, part 1 of 2
30	e2e: Add workspace specs, part 2 of 2
31	examples: Add the workspace demo workflows

Stack 12/31. Base branch: stack/11-ui06. Review and merge in order; this PR builds on the previous one.
Size: 42 files changed, 7879 insertions(+).
Checked: Typecheck (tsc) of the whole UI and the unit tests of this PR (Vitest), on top of the previous PR.

Summary

This PR adds the graph model of the canvas (graph, edge routing, gestures, ghost node, palette model), the Add step panel, the issues popover with change bars, and the run bar with draft recovery. It also adds a YAML tokenizer and form diff helpers. It adds 42 new files and changes no existing file.

Why

The canvas needs a model of nodes and edges before it can draw them. The editor also needs a way to add steps, to show issues, to mark changed lines and to keep a draft. This PR follows PR 11 (edit session, format, run actions). PR 13 draws the edges and layout on this model, and PR 15 adds the node components.

Changes

Canvas model (visual-editor/canvas): graph.ts (resolve step names and ids), edgeRouting.ts, gestures.ts (connections drawn by the user), ghost.ts and edges/GhostEdge.tsx, edges/useEdgeCurve.ts, edges/dash.ts, paletteModel.ts, agentHeader.ts, ContextMenu.tsx.
Add step: AddStepPanel.tsx, addStepAliases.ts, YamlSnippet.tsx, yamlTokenizer.ts (coloured pieces of a line).
Issues and change bars (dag-editor): IssuesPopover.tsx, lineChanges.ts, useChangeBars.ts, useYamlSection.ts; inspector/FieldIssues.tsx, inspector/issues.ts.
Form helpers: inspector/formDiff.ts, inspector/sections/flow/envForm.ts.
Run (visual-editor/run): RunBar.tsx, useDraftRecovery.ts, draftStorage.ts, useRunSpecStale.ts, agentRun.ts.
42 files are new; 0 are modified.

How to review

canvas/graph.ts and canvas/edgeRouting.ts.
canvas/gestures.ts and canvas/ghost.ts.
AddStepPanel.tsx.
run/useDraftRecovery.ts and run/RunBar.tsx.
IssuesPopover.tsx, lineChanges.ts, useChangeBars.ts.

Most attention: useDraftRecovery.ts (when a draft is kept or dropped), and the line matching in lineChanges.ts.

Tests

AddStepPanel.test.tsx, YamlSnippet.test.tsx, yamlTokenizer.test.ts.
dag-editor/__tests__/IssuesPopover.test.tsx, lineChanges.test.ts, useChangeBars.test.tsx.
run/__tests__/RunBar.test.tsx, useDraftRecovery.test.ts, draftStorage.test.ts, useRunSpecStale.test.tsx, agentRun.test.ts.
canvas/__tests__/agentHeader.test.ts; inspector/__tests__/envForm.test.ts, formDiff.test.ts.
step-details/__tests__/PanelShell.test.tsx.

Screenshots

These components are used by later PRs; the screenshots show the YAML panel and the run bar in the final UI.

…s, tab strip (dagucloud#3391) * UI: visual-editor/canvas, visual-editor/doc, visual-editor/(root) * Fix formatter, dirty check and duplicate bugs * Guard lookups by user keys and label sheet panel * Fix compare, step format, clipboard and run label

Two steps with the same issue message both pointed at the first step; a row now reveals the step of its own structured issue. Toggling a favourite in the add-step list left the highlight on the row position, so a second Alt+Shift+F toggled another action. The active row now follows the toggled action. An env list of one-key maps with a repeated key sent edits to the wrong item; edits now target the item that gives the value. Form diffs, field issue groups and agent run counts treated keys such as `constructor` as inherited properties; they now use own keys only. A step that cannot be read and has no name could get its placeholder label written into a route. The YAML tokenizer ended a block scalar of a list item at the wrong column, so the next key of the item lost its colour and required-key mark.

useYamlSection set a host state that disagreed with what showed back to the old kind. A link that turned the host 'expanded' (Open step on a failure, a run tab) while the YAML file showed, or while the section was closed, was rewritten to 'docked', so the file opened instead of the step. A host that turns 'expanded' now decides what shows; a 'docked' link for a shown step is still set right. An issue row was a button whenever it had a step or a line, even when no callback could act on it: a row with only a line and no onRevealIssue, or a value reference with only onRevealIssue, closed the popover and did nothing. A row is a button now only when a callback acts on it. readEnv wrote a `__proto__=...` entry into a plain object, which dropped it, so the env editor lost it on the next edit. The entries have no prototype now. The popover tests use role queries in place of test ids.

The + button of an edge inferred from a step reference inserts a step between the two ends, and the ghost shows it there. The edit only made the new step depend on the source. The target lists no depends, so it kept running beside the new step instead of after it. The new step now joins the depends of a target that does not list the source. The reference of the target still resolves: the source is upstream of the new step.

This was referenced Oct 28, 2026

specs: Add spec 083 and the samples store dagucloud/dagu#3381

Merged

ui(editor): Add canvas graph model, Add step panel, issues popover, run bar dagucloud/dagu#3392

Merged

yohamta0 force-pushed the stack/12-ui07 branch from 2be6245 to b4c9717 Compare October 29, 2026 09:21

yohamta0 force-pushed the stack/11-ui06 branch 2 times, most recently from 731a3b7 to 09e506e Compare October 29, 2026 12:58

yohamta0 force-pushed the stack/12-ui07 branch from b4c9717 to 14bc39e Compare October 29, 2026 12:58

yohamta0 force-pushed the stack/11-ui06 branch from 09e506e to 39da1eb Compare October 30, 2026 06:44

yohamta0 force-pushed the stack/12-ui07 branch from 14bc39e to 71d9ece Compare October 30, 2026 06:44

yohamta0 force-pushed the stack/11-ui06 branch from 39da1eb to dc398f0 Compare October 30, 2026 08:43

yohamta0 force-pushed the stack/12-ui07 branch 2 times, most recently from 79e7296 to f551129 Compare October 31, 2026 04:50

yohamta0 force-pushed the stack/11-ui06 branch from 6188c7e to e4ac932 Compare October 31, 2026 05:37

yohamta0 force-pushed the stack/12-ui07 branch 2 times, most recently from 361ac5e to 4bcacec Compare October 31, 2026 09:21

yohamta0 force-pushed the stack/11-ui06 branch 2 times, most recently from 3ddec57 to ade3afa Compare October 31, 2026 10:39

SCcagg5 and others added 5 commits October 31, 2026 19:39

UI: visual-editor/canvas, visual-editor/run, dags/components

bc7e9cf

yohamta0 force-pushed the stack/12-ui07 branch from 4bcacec to df34b0d Compare October 31, 2026 10:39

Navigation Menu

Repository navigation

ui(editor): Add canvas graph model, Add step panel, issues popover, run bar - #12

ui(editor): Add canvas graph model, Add step panel, issues popover, run bar#12
SCcagg5 wants to merge 5 commits into
stack/11-ui06from
stack/12-ui07

SCcagg5 commented Oct 28, 2026 •

edited

Loading

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

SCcagg5 commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Changes

How to review

Tests

Screenshots

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SCcagg5 commented Oct 28, 2026 •

edited

Loading